<template>
  <div>
    <el-container>
      <el-aside width="400px">
        <el-avatar :size="100" :src="circleUrl" align="center"></el-avatar>
        Cycle
      </el-aside>
      <el-main>
        <el-tabs tab-position="left" @tab-click="handleClick">
          <el-tab-pane label="个人信息">
            <el-descriptions
              class="margin-top"
              title="带边框列表"
              :column="3"
              border
            >
              <template slot="extra">
                <el-button type="primary" size="small">操作</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                Cycle
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                123
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                  居住地
                </template>
                广州市
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  备注
                </template>
                <el-tag size="small">学校</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  联系地址
                </template>
                广州市从化区广州软件学院
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="我的订单">
            <el-tabs type="border-card" @tab-click="handleClickType">
              <el-tab-pane label="全部订单">
                <div class="text item" v-show="showOder">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="title" label="商品" width="180">
                    </el-table-column>
                    <el-table-column prop="num" label="数量"> </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="address" label="填写地址">
                    </el-table-column>
                    <el-table-column prop="phone" label="填写的手机">
                    </el-table-column>
                    <el-table-column prop="phone" label="状态">
                      <template slot-scope="scope">
                        <el-tag :style="scope.row.style" type="danger">{{
                          scope.row.isDisplayName
                        }}</el-tag>
                        <el-button
                          type="text"
                          @click="updateType(scope.row.id)"
                          >{{
                            scope.row.status == 0 ? "点击收货" : ""
                          }}</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane label="待收货">
                <div class="text item" v-show="showOder">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="title" label="商品" width="180">
                    </el-table-column>
                    <el-table-column prop="num" label="数量"> </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="address" label="填写地址">
                    </el-table-column>
                    <el-table-column prop="phone" label="填写的手机">
                    </el-table-column>
                    <el-table-column prop="phone" label="状态">
                      <template slot-scope="scope">
                        <el-tag :style="scope.row.style" type="danger">{{
                          scope.row.isDisplayName
                        }}</el-tag>
                        <el-button
                          type="text"
                          @click="updateType(scope.row.id)"
                          >{{
                            scope.row.status == 0 ? "点击收货" : ""
                          }}</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane label="已收货">
                <div class="text item" v-show="showOder">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="title" label="商品" width="180">
                    </el-table-column>
                    <el-table-column prop="num" label="数量"> </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="address" label="填写地址">
                    </el-table-column>
                    <el-table-column prop="phone" label="填写的手机">
                    </el-table-column>
                    <el-table-column prop="phone" label="状态">
                      <template slot-scope="scope">
                        <el-tag :style="scope.row.style" type="danger">{{
                          scope.row.isDisplayName
                        }}</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane label="已取消">已取消</el-tab-pane>
            </el-tabs>
          </el-tab-pane>

          <el-tab-pane label="密码修改">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
       var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      circleUrl:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      tableData: [],
      showOder: false,
      ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.index == 0) {
      } else if (tab.index == 1) {
        this.checkOrder();
      } else if (tab.index == 2) {
      }
    },
    handleClickType(tab, event) {
      if (tab.index == 0) {
        this.checkOrder();
      } else if (tab.index == 1) {
        console.log(tab.index);
        this.checkOrderByType(0);
      } else if (tab.index == 2) {
        this.checkOrderByType(1);
      }
    },
    checkOrder() {
      this.$axios
        .post("/apis/getOrdersListByID", {
          userid: this.cookie.getCookie("userid"),
        })
        .then((response) => {
          response.data.data.orders.forEach((e) => {
            if (e.status == "0") {
              e.style =
                "background-color: rgba(255, 100, 97, 0.4) !important;border: 1px solid #ff6461 !important;";
              e.isDisplayName = "待收货";
            } else if (e.status == "1") {
              e.style =
                "background-color: rgba(2, 236, 169, 0.4) !important;border: 1px solid #02eca9 !important;";
              e.isDisplayName = "已收货";
            }
          });

          let orders = response.data.data.orders;
          console.log(typeof roles); //JSON.parse(JSON.stringify(object对象类型1))对象不能直接赋值
          this.tableData = orders;
          console.log(this.tableData);
          this.showOder = true;
        });
    },
    checkOrderByType(status) {
      this.$axios
        .post("/apis/getOrdersListByIDByType", {
          userid: this.cookie.getCookie("userid"),
          status: status,
        })
        .then((response) => {
          response.data.data.orders.forEach((e) => {
            if (e.status == "0") {
              e.style =
                "background-color: rgba(255, 100, 97, 0.4) !important;border: 1px solid #ff6461 !important;";
              e.isDisplayName = "待收货";
            } else if (e.status == "1") {
              e.style =
                "background-color: rgba(2, 236, 169, 0.4) !important;border: 1px solid #02eca9 !important;";
              e.isDisplayName = "已收货";
            }
          });

          let orders = response.data.data.orders;
          console.log(typeof roles); //JSON.parse(JSON.stringify(object对象类型1))对象不能直接赋值
          this.tableData = orders;
          console.log(this.tableData);
          this.showOder = true;
        });
    },
    updateType(reid) {
      console.log(reid);
      this.$axios
        .post("/apis/updateOrdersListByIDByType", {
          reid: reid,
          status: 1,
        })
        .then((response) => {
          this.$notify({
            title: "成功",
            message: "确认收货成功",
            type: "success",
          });
          this.checkOrder();
        });
    },
    offOrder: function () {
      this.showOder = false;
    },
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
p {
  font-family: "Helvetica Neue";
}
</style>